<template>
    <div class="table">
        <div class="content-common">
			<el-row type="flex" class="row-bg" justify="space-between" style="padding-bottom:20px">
				<el-col :span="6"><el-button type="primary"  @click="prepage()">返回</el-button></el-col>
				<el-col :span="6" style="text-align:right">
<!--           			<el-button type="primary" icon="plus" @click="handleAdd()">新增</el-button>
 -->					
					<el-button type="primary"  icon="download" @click="daochu()">导出记录</el-button>
				</el-col>
			</el-row>
			<div style="font-size:18px;text-align:center;font-weight:bold;padding-bottom:8px">
			小区整编表-5 {{stnm}}站径流小区逐次径流泥沙
		   </div>
            <el-table
                :data="tableData"
                border
                class="table-common"
                header-cell-class-name="table-header">
                <el-table-column align="center" prop="areaCode" label="小区号"></el-table-column>
                <el-table-column align="center" prop="purpose" label="降雨起">
                	<el-table-column align="center" prop="monthBegin" label="月"></el-table-column>
                	<el-table-column align="center" prop="dayBegin" label="日"></el-table-column>
                	<el-table-column align="center" prop="timeBegin" label="时:分"></el-table-column>
                </el-table-column>
                <el-table-column align="center" prop="slope" label="降雨止">
                	<el-table-column align="center" prop="dayEnd" label="日"></el-table-column>
                	<el-table-column align="center" prop="timeEnd" label="时:分"></el-table-column>
                </el-table-column>
				<el-table-column align="center" prop="totalPdr" label="历时(min)"></el-table-column>
				<el-table-column align="center" prop="totalDrp" label="雨量(mm)"></el-table-column>
                <el-table-column align="center" prop="avgRainIntensity" label="平均雨强(mm/h)"></el-table-column>
                <el-table-column align="center" prop="i30" label="I30 (mm/h)"></el-table-column>
                <el-table-column align="center" prop="ei30" label="降雨侵蚀力(MJ.mm /(ha.h))"></el-table-column>
                <el-table-column align="center" prop="runoffDepth" label="径流深(mm)"></el-table-column>
                <el-table-column align="center" prop="runoffCoefficient" label="径流系数">
                </el-table-column>
                <el-table-column align="center" prop="sandContent" label="含沙量(g/l)">
                </el-table-column>
                <el-table-column align="center" prop="soilLoss" label="土壤流失量(t/h㎡)"></el-table-column>
                <el-table-column align="center" prop="waterContentBefore" label="雨前土壤含水量(%)"></el-table-column>
                <el-table-column align="center" prop="waterContentAfter" label="雨后土壤含水量(%)"></el-table-column>
                <el-table-column align="center" prop="plantCoverage" label="植被盖度(%)"></el-table-column>
                <el-table-column align="center" prop="avgHeight" label="平均高度(m)"></el-table-column>
                <el-table-column align="center" prop="remark" label="备注"></el-table-column>
                <!-- <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                        <el-button type="primary"  @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger"   @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
			
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="logTitle" v-model="editVisible" width="1300px">
			<el-table
			    :data="subData"
			    border
			    class="table-common"
			    header-cell-class-name="table-header">
			    <el-table-column align="center" prop="areaCode" label="小区号"></el-table-column>
			    <el-table-column align="center" prop="purpose" label="降雨起">
					<el-table-column align="center" prop="monthBegin" label="月"></el-table-column>
					<el-table-column align="center" prop="dayBegin" label="日"></el-table-column>
					<el-table-column align="center" prop="timeBegin" label="时:分"></el-table-column>
				</el-table-column>
				<el-table-column align="center" prop="slope" label="降雨止">
					<el-table-column align="center" prop="dayEnd" label="日"></el-table-column>
					<el-table-column align="center" prop="timeEnd" label="时:分"></el-table-column>
				</el-table-column>
				<el-table-column align="center" prop="avgRainIntensity" label="平均雨强(mm/h)"></el-table-column>
				<el-table-column align="center" prop="i30" label="I30 (mm/h)"></el-table-column>
				<el-table-column align="center" prop="ei30" label="降雨侵蚀力(MJ.mm /(ha.h))"></el-table-column>
				<el-table-column align="center" prop="runoffDepth" label="径流深(mm)"></el-table-column>
				<el-table-column align="center" prop="runoffCoefficient" label="径流系数" width="140px">
					<template #default="scope">
					    <el-input style="width:80px" v-model="scope.row.runoffCoefficient" placeholder=""></el-input>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="sandContent" label="含沙量(g/l)" width="140px">
					<template #default="scope">
					    <el-input style="width:80px" v-model="scope.row.sandContent" placeholder=""></el-input>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="soilLoss" label="土壤流失量(t/h㎡)"></el-table-column>
				<el-table-column align="center" prop="waterContentBefore" label="雨前土壤含水量(%)"></el-table-column>
				<el-table-column align="center" prop="waterContentAfter" label="雨后土壤含水量(%)"></el-table-column>
				<el-table-column align="center" prop="plantCoverage" label="植被盖度(%)"></el-table-column>
				<el-table-column align="center" prop="avgHeight" label="平均高度(m)"></el-table-column>
				<el-table-column align="center" prop="remark" label="备注" width="140px">
					<template #default="scope">
					    <el-input style="width:80px" v-model="scope.row.remark" placeholder=""></el-input>
					</template>
				</el-table-column>
			    
			</el-table>
			<template #footer>
				<span  class="dialog-footer">
		      
			  <el-button type="primary" @click="saveEdit">确 定</el-button>
		  		</span>
			</template>
        </el-dialog>
    </div>
</template>

<script>

import {useStore} from 'vuex'
import { reorganizeseqSedimentviewselectReorganizeData,reportfieldManageeditdoApprove,reportfieldManageeditrevokeRecord,reportfieldManageeditsubmitRecord,
viewPageStationInfo,rainfallImportRainfallDaily,reorganizeseqSedimentviewlistDetail, reorganizeseqSedimentsaveaddDetail, 
reorganizeseqSedimentremovedelDetail } from '../../../api/index';
import moment from 'moment'
export default {
    name: 'zhengbianzhucinishamingxi',
    data() {
        return {
			subData:[],
			status:'/',
			rules: {
			 
			  areaCode: [
								{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  monthBegin: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  dayBegin: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  timeBegin: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  dayEnd: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  timeEnd: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  totalPdr: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  totalDrp: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  avgRainIntensity: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  i30: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  ei30: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  runoffDepth: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  runoffCoefficient: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  sandContent: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  soilLoss: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  waterContentBefore: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  waterContentAfter: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  plantCoverage: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  avgHeight: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ]
			},
			shenpilog:false,
			globalUser:[],
			page:{
				currentPage: 1,
				pageSize: 10,
				totalPage: 0,
				totalSize: 0
			},
            query: {
                year:moment().format('YYYY')
            },
			excelllog:false,
            formInline: {},
            tableData: [],
           stnm:stationInfo.stnm,
            editVisible: false,
            logTitle: '',
            pageTotal: 0,
            form: {
               year:moment().format('YYYY')
            },
			stationData:[],
			checkArr:[],
			tijiaoform:{
				
			},
			selnow:{}
        };
    },
    created() {
		
		this.status=this.$route.query.status
		this.globalUser=globalUser
        let that = this;
        //that.getData();
		
		this.getjisuandata()
		
    },
    methods: {
		daochu(){
			location.href=globalVar.jingliujiangyuUrl+`/soilWater/runoffField/reorganize/seqSediment/export/exportReorganizeData?headNo=${this.$route.query.recordNo}&year=${this.$route.query.year}&stcd=${this.$route.query.stcd}`
		},
		prepage(item){
			 this.$router.go(-1);
		},
		quedingtijiao(){
			this.tijiaoform.relatedNo=this.selnow.recordNo
			let that=this
			reportfieldManageeditdoApprove(that.tijiaoform).then(e=>{
				that.$message.success('操作成功');
				that.shenpilog=false
			}).catch(e=>{
				console.log(err)
			})
		},
		getjisuandata(){
			
			let that=this
			reorganizeseqSedimentviewselectReorganizeData({
				stcd:stationInfo.stcd,
				obDate:that.$route.query.obDate+':00',
				year:that.$route.query.year
			}).then(e=>{
				that.subData=e.object.map(item=>{
					item.headNo=that.$route.query.recordNo
					delete item.detailNo
					item.monthEnd=item.monthBegin
					return item
				})
				that.handleAdd()
			}).catch(err=>{
				console.log(err)
			})
		},
	
		getstationData() {
			let data={
				currentPage:1,
				pageSize:1000
			}
		    viewPageStationInfo(data).then((res) => {
		       
		        this.stationData = res.object.dataList.filter(item=>{
                    return item.stType==systype
                });
		       
		       
		    });
		},
		daorujiangyu(){
			let that=this
			rainfallImportRainfallDaily(that.form).then(e=>{
				console.log(e)
			}).catch(err=>{
				console.log(err)
			})
		},
      
        getData() {
			let data={
				headNo:this.$route.query.recordNo

			}
            reorganizeseqSedimentviewlistDetail(data).then((res) => {
               
                this.tableData = res.object;
               
                
            });
        },
      
       
		
      
        // 编辑操作
        handleEdit(row) {
           this.subData = [row];
           
            this.logTitle = '编辑逐次径流泥沙整编明细';
           
            this.editVisible = true;
        },
        handleAdd() {
            this.logTitle = '新增逐次径流泥沙整编明细';
            this.form = {
               year:moment().format('YYYY')
            };
           // this.editVisible = true;
		   this.saveEdit()
        },
        // 保存编辑
        saveEdit() {
            let that=this
			reorganizeseqSedimentsaveaddDetail(that.subData).then((e) => {
			    this.editVisible = false;
			    //this.$message.success('操作成功');
			    this.getData();
			});
			
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>

